<template>
    <div>
        <el-row :gutter="30">
            <el-col :span="12">
                <el-card class="number-card">
                    <el-card class="num-a" style="margin-top: 5px">
                        <div>Total Customer</div>
                        <div class="num-large">729</div>
                        <div style="margin-left:-80px;margin-top:-50px;opacity: 0.7">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:150px;margin-top:-180px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:180px;margin-top:-30px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                    </el-card>
                    <el-card class="num-b">
                        <div>Sales Department</div>
                        <div class="num-large">13</div>
                        <div style="margin-left:-100px;margin-top:-100px;opacity: 0.7">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:150px;margin-top:-180px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:180px;margin-top:-30px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                    </el-card>
                    <el-card class="num-c">
                        <div>Customer Manager</div>
                        <div class="num-large">8</div>
                        <div style="margin-left:-100px;margin-top:-50px;opacity: 0.7">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:150px;margin-top:-180px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                        <div style="margin-left:180px;margin-top:-30px;opacity: 0.3">
                            <img src="@/assets/icon/16.png">
                        </div>
                    </el-card>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card
                    class="ratio-card"
                    style="height: 200px"
                >
                    <div>
                        <span style="font-weight: bold">Sales department profit</span>

                        <div style="position: relative">
                            <div style="position: absolute;left: 36px;top: 50px">
                                <img src="@/assets/icon/c1.png"/>
                            </div>
                            <div style="position: absolute;left: 18px;top: 32px">
                                <img src="@/assets/icon/c2.png"/>
                            </div>
                            <div style="position: absolute;top: 14px">
                                <img src="@/assets/icon/c3.png"/>
                            </div>
                            <div
                                style="position: absolute;left:63px;top: 73px;width: 76px;height: 72px;background-color: white;border-bottom-left-radius: 50px">

                            </div>
                        </div>
                        <div style="margin-left: 150px;margin-top: 30px">
                            <div style="display: flex;align-items: center;justify-content: center">
                                <div
                                    style="border-radius: 50px;height: 8px;width: 8px;background-color:#8FCD4E ">

                                </div>
                                <div style="margin-left: 10px;font-size: 12px">
                                    Sales A
                                </div>
                            </div>
                            <div
                                style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
                                <div
                                    style="border-radius: 50px;height: 8px;width: 8px;background-color:#FFA000">

                                </div>
                                <div style="margin-left: 10px;font-size: 12px">
                                    Sales B
                                </div>
                            </div>
                            <div
                                style="display: flex;align-items: center;justify-content: center;margin-top: 10px">
                                <div
                                    style="border-radius: 50px;height: 8px;width: 8px;background-color:#6DBEF8">

                                </div>
                                <div style="margin-left: 10px;font-size: 12px">
                                    Sales C
                                </div>
                            </div>
                        </div>

                    </div>
                </el-card>
                <el-card
                    class="ratio-card"
                    style="height: 100px;margin-top: 18px"
                >
                    <div style="position: relative">
                        <div
                            style="position: absolute;left: 10px;top:8px; height: 48px;width: 48px; border: 1px solid rgba(143, 205, 78, 100);text-align: center;line-height: 62px;border-radius: 12px">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="26" height="26"
                                 style="fill: rgba(143, 205, 78, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M4 25.333v-17.733c0-0 0-0 0-0 0-0.573 0.361-1.061 0.868-1.25l0.009-0.003 12.895-4.688c0.068-0.025 0.146-0.040 0.228-0.040 0.368 0 0.667 0.298 0.667 0.667 0 0 0 0 0 0v0 6.604l8.421 2.807c0.534 0.182 0.912 0.679 0.912 1.265 0 0 0 0 0 0v-0 12.372h2.667v2.667h-29.333v-2.667h2.667zM6.667 25.333h9.333v-20.193l-9.333 3.395v16.799zM25.333 25.333v-11.411l-6.667-2.223v13.633h6.667z"></path>
                            </svg>
                        </div>
                        <div style="position: absolute;left: 80px;top: 5px">
                            <div style="color: rgba(170, 166, 200, 100);
font-size: 14px;">
                                Annual Revenue
                            </div>
                            <div style="margin-top: 10px;display: flex;align-items: flex-end">
                                <div style="color: rgba(53, 45, 126, 100);
font-size: 20px;">
                                    1,666,000
                                </div>
                                <div style="margin-left: 3px;color: rgba(170, 166, 200, 100);
font-size: 14px;">
                                    yuan
                                </div>
                            </div>

                        </div>
                    </div>


                </el-card>
                <el-card
                    class="ratio-card"
                    style="height: 100px;margin-top: 18px"
                >
                    <div style="position: relative">
                        <div
                            style="position: absolute;left: 10px;top:8px; height: 48px;width: 48px; border: 1px solid rgba(242, 87, 103, 100);text-align: center;line-height: 62px;border-radius: 12px">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="26" height="26"
                                 style="fill: rgba(242, 87, 103, 1);border-color: rgba(0,0,0,0);border-width: bpx;border-style: undefined"
                                 filter="none">
                                <path
                                    d="M2.667 17.333h8v10.667h-8v-10.667zM21.333 10.667h8v17.333h-8v-17.333zM12 4h8v24h-8v-24zM5.333 20v5.333h2.667v-5.333h-2.667zM14.667 6.667v18.667h2.667v-18.667h-2.667zM24 13.333v12h2.667v-12h-2.667z"></path>
                            </svg>
                        </div>
                        <div style="position: absolute;left: 80px;top: 5px">
                            <div style="color: rgba(170, 166, 200, 100);
font-size: 14px;">
                                KPI
                            </div>
                            <div style="margin-top: 10px;display: flex;align-items: flex-end">
                                <div style="color: rgba(53, 45, 126, 100);
font-size: 20px;">
                                    666,000
                                </div>
                                <div style="margin-left: 3px;color: rgba(170, 166, 200, 100);
font-size: 14px;">
                                    yuan
                                </div>
                            </div>

                        </div>
                    </div>

                </el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col>
                <el-card class="chart-card">
                    <div>
                        <img src="@/assets/icon/s1.png">
                    </div>

                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "CustomerStatic"
}
</script>

<style scoped>
.number-card {
    border-radius: 20px 20px 20px 20px;

}

.ratio-card {
    width: 266px;
    border-radius: 20px 20px 20px 20px;
    margin-right: 50px;
}

.chart-card {
    width: 587px;
    height: 230px;
    border-radius: 20px 20px 20px 20px;
    margin-top: 20px;
    margin-right: 50px;
}

.num-a {
    border-radius: 5px;
    margin-top: 24px;
    height: 120px;
    width: 240px;
    background-color: #FFA6A6;
    color: #ffffff;
    overflow: hidden;
}

.num-b {
    border-radius: 5px;
    margin-top: 24px;
    height: 120px;
    width: 240px;
    background-color: #8693F3;
    color: #ffffff;
}

.num-c {
    border-radius: 5px;
    margin-top: 24px;
    height: 120px;
    width: 240px;
    background-color: #A47BD0;
    color: #ffffff;
}

.num-large {
    margin-top: 20px;
    font-size: 24px;
}

</style>